<script type="text/html" template>
  <link rel="stylesheet" href="{{ layui.setter.base }}style/alert.css">
</script>
<style>
  .layui-layer-title {
    display: none;
  }
  .footer{
    margin-top: 40px;
  }
  .footer button{
    font-size: 10px;
    padding: 0 10px;
    width: auto;
    height: 25px;
    line-height: 25px;
    margin: 0;
    border-radius: 12px;
    margin-right: 10px;
  }
  #test1{
    width: 100%;
    overflow-y: scroll;
    height: 450px;
  }
  .row .btn2{
    margin-left: 10px;
  }
</style>
<div class="layui-form row" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
  style="padding: 0 30px 0 0;">
  <div style="text-align: center;font-size: 20px;">授权菜单</div>
    <div id="test1"></div>
  <input type="hidden" name="id" id="roleId">
  <div class="footer layui-form-item" style="text-align: center;">
    <div class="layui-input-inlineblock">
      <button class="layui-btn layui-btn-fluid layui-btn-danger" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-fluid" lay-submit lay-filter="res" style="background-color: #8A8A8A;">重置</button>
      <button type="reset" class="btn2 layui-btn-fluid" lay-submit style="background-color: #8A8A8A;">取消</button>
    </div>
  </div>
<script>
  layui.use(['admin', 'form', 'user', 'api', "element", 'tree', 'laytpl','util','jquery','dtree','layer'], function () {
    var $ = layui.jquery,
      admin = layui.admin,
      view = layui.view,
      api = layui.api,
      table = layui.table,
      setter = layui.setter,
      utill = layui.utill,
      layer = layui.layer,
      element = layui.element,
      laytpl = layui.laytpl,
      tree = layui.tree,
      util = layui.util,
      dtree = layui.dtree,
      form = layui.form;
      var checked = [];
      function rep(arr) {
      var ret = [];
      for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) == i) {
                ret.push(arr[i]);
            }
          }
          return ret;
      }
      let checkArr = '0';//设置初始状态
      let checkArr_one = '1';//设置选中状态
          admin.req({
            url: api.host + api.getMenu,
            data: {},
            done: function (res) {
              for (let index = 0; index < res.data.length; index++) {
                res.data[index].spread = true
                res.data[index].title = res.data[index].tcName
                res.data[index].id = res.data[index].tcMenuId
                res.data[index].children = res.data[index].child
                res.data[index].checkArr = checkArr
                if (res.data[index].children.length > 0) {
                  for (let k = 0; k < res.data[index].children.length; k++) {
                    res.data[index].children[k].title = res.data[index].children[k].tcName
                    res.data[index].children[k].id = res.data[index].children[k].tcMenuId
                    res.data[index].children[k].checkArr = checkArr
                  }
                }
              }
            var DemoTree = dtree.render({
              elem: '#test1',
              data: res.data,
              type:"all",
              width:'100%',
              accordion: true,
              checkbar: 'tree',
              checkbarType: "all",
              checkbarLoad:'node',
              line: false,
              checkbarData:'choose',
              icon: "-1",
              done: function(){
                admin.req({
                  url: api.host + api.selectRoleMenu,
                  data: {
                    id: document.getElementById('roleId').value
                  },
                  done: function (res) {
                    res.data.forEach(function(data,index){
                      data.checkArr = checkArr_one;
                      checked.push(data.tcMenuId);
                      data.child.forEach(function(data,index){
                        data.checkArr = checkArr_one;
                        checked.push(data.tcMenuId);
                    });
                    });
                    if(checked != null){
                      dtree.chooseDataInit('test1',checked.toString())
                    }
              }
            });
              }
            });
            
        }
      })
    $('.footer').on('click','.btn2',function(){
      layer.closeAll()
    })
    form.on('submit(res)', function(data){
      checked = [];
      checked.length = 0;
      form.render();
      dtree.reload('test1');
    });

    form.on('submit(*)', function(data){
      let arr = [];
      var params = dtree.getCheckbarNodesParam("test1");
      params.forEach(elem=>{
        arr.push(elem.nodeId);
      })
      var data = {
        tcRoleId: document.getElementById('roleId').value,
        tcMenuId: arr
      };
        admin.req({
          url: api.host + api.insertRoleMenu,
          contentType: 'application/json',
          dataType: 'json',
          data: JSON.stringify(data),
          type: "POST",
        });
      form.render();
      checked = [];
      checked.length = 0;
      layer.closeAll()
      dtree.reload('test1');
      return false;
    });
  });
</script>